const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = (env, argv) => {
  const isProduction = argv.mode === "production";
  return {
    mode: isProduction ? "production" : "development",
    entry: "./src/utils/register-wc.js",
    output: {
      library: { name: "ReactWebComponents", type: "umd" },
      filename: "react-web-components.js",
      path: path.resolve(__dirname, "dist"),
      clean: true,
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
          },
        },
        {
          test: /\.css$/,
          oneOf: [
            {
              resourceQuery: /inline/,
              use: [
                {
                  loader: 'css-loader',
                  options: {
                    exportType: 'string'
                  }
                }
              ]
            },
            {
              use: [/*'style-loader',*/ 'css-loader']
            }
          ]
        },
        {
          test: /\.less$/,
          oneOf: [
            {
              resourceQuery: /inline/,
              use: [
                {
                  loader: 'css-loader',
                  options: {
                    exportType: 'string'
                  }
                },
                "less-loader"
              ]
            },
            {
              use: [
                // 'style-loader',
                'css-loader',
                'less-loader'
              ]
            }
          ]
        }
      ],
    },
    // 关键配置：将React和ReactDOM作为外部依赖
    externals: {
      react: "React",
      "react-dom": "ReactDOM",
      "react-dom/client": "ReactDOM",
    },
    resolve: {
      extensions: [".js", ".jsx"],
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    devtool: isProduction ? false : "source-map",
    plugins: [
	    new HtmlWebpackPlugin({
	      title: "react-to-wc",
	      filename: "index.html",
	      template: "./public/index.html",
	    }),
	  ]
  };
};
